<template>
  <div class="boxer">
    <div
      class="titlelist6_10 titles"
      style="border-bottom: 1px solid #ebeef5; padding-left: 20px"
    >
      机构管理 / 机构列表 / 配置
    </div>
    <div class="topBox" style="margin-top: 50px">
      <div class="topList" style="margin-right: 40px">
        <div class="title">机构ID：</div>
        <div class="titleTxt">{{ officeUid }}</div>
      </div>
      <div class="topList">
        <div class="title">机构名称：</div>
        <div class="titleTxt">{{ name }}</div>
      </div>
    </div>
    <div class="tabTopTitle">
      <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
        <el-tab-pane label="支付方式" name="first"></el-tab-pane>
        <el-tab-pane label="提现方式" name="second"></el-tab-pane>
        <el-tab-pane label="开通业务" name="four"></el-tab-pane>
        <el-tab-pane label="推送密钥" name="third"></el-tab-pane>
      </el-tabs>

      <!-- <div class="list" :class="num == 1 ? 'active' : ''" @click="payType">
        支付方式
      </div>
      <div class="list" :class="num == 2 ? 'active' : ''" @click="withdrawal">
        提现方式
      </div>
      <div class="list" :class="num == 3 ? 'active' : ''" @click="pushKey">
        推送密钥
      </div> -->
    </div>
    <div style="clear: both"></div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$route.query.officeUid);
    console.log(this.$route.query.agtType);
    console.log(this.$route.query.businessInfo);
    // this.businessInfo = localStorage.getItem("businessInfo");
    // this.officeUid = localStorage.getItem("officeUid11");
    // this.agtType = localStorage.getItem("agtType1s");
    // alert(this.agtType)
    // alert(localStorage.getItem("businessInfo"))
    // debugger
    // this.num = localStorage.getItem("configure") || 1
    // if(localStorage.getItem("configure")){
    //     this.num = localStorage.getItem("configure")
    // }else{
    //     this.num = 1
    // }

    if (localStorage.getItem("activeName")) {
      this.activeName = localStorage.getItem("activeName");
    } else {
      this.activeName = "first";
    }
    this.num = sessionStorage.getItem("l_num");

    if (
      localStorage.getItem("businessInfo") == null &&
      localStorage.getItem("officeUid11") == null &&
      localStorage.getItem("agtType1s") == null
    ) {
      localStorage.setItem("businessInfo11", this.$route.query.businessInfo);
      localStorage.setItem("officeUid11", this.$route.query.officeUid);
      localStorage.setItem("agtType1s", this.$route.query.agtType);
    } else {
      this.businessInfo = localStorage.getItem("businessInfo11");
      this.officeUid = localStorage.getItem("officeUid11");
    }
    this.businessInfo = localStorage.getItem("businessInfo11");
    this.officeUid = localStorage.getItem("officeUid11");
    this.agtType = localStorage.getItem("agtType1s");

    if (sessionStorage.getItem("name")) {
      this.name=sessionStorage.getItem("name");
    } else {
      this.name = this.$route.query.master;
      sessionStorage.setItem("name", this.name);
    }
  },
  data() {
    return {
      name: "",
      activeName: "first",
      officeUid: "",
      businessInfo: "",
      agtType: "",
      num: "1",
    };
  },
  methods: {
    // 点击某一个支付方式
    handleClick(tab, event) {
      localStorage.setItem("activeName", this.activeName);
      console.log(tab.index);
      let val = tab.index;
      if (val == 0) {
        this.payType();
      } else if (val == 1) {
        this.withdrawal();
      } else if (val == 3) {
        this.pushKey();
      }else if( val==2 ){
        this.openBussiness()
      }
    },

    //   跳转支付方式
    payType() {
      sessionStorage.setItem("l_num", "1");
      this.num = sessionStorage.getItem("l_num");
      this.$router.push({
        name: "config1",
        query: {
          officeUid: this.officeUid,
          agtType: this.agtType,
          businessInfo: this.businessInfo,
        },
      });
    },
    withdrawal() {
      sessionStorage.setItem("l_num", "2");
      this.num = sessionStorage.getItem("l_num");
      this.$router.push({
        name: "confing2",
        query: {
          businessInfo: this.businessInfo,
        },
      });
    },
    // 开通业务
    openBussiness(){
      sessionStorage.setItem("l_num", "3");
      this.num = sessionStorage.getItem("l_num");
      this.$router.push({
        name:"confing4",
        query:{
          oemUid:this.officeUid,
        }
      })
    },
    // 推送密钥
    pushKey() {
      sessionStorage.setItem("l_num", "3");
      this.num = sessionStorage.getItem("l_num");

      this.$router.push({
        name: "confing3",
        query: {
          officeUid: this.officeUid,
          agtType: this.agtType,
        },
      });
    },
  },
  beforeDestroy() {
    sessionStorage.setItem("l_num", 1);
  },
};
</script>

<style scoped>
.tabTopTitle {
  display: flex;
  margin: 0 auto;
  margin-top: 20px;
  border-bottom: 1px solid #ebeef5;
  width: 98%;
}
.list {
  font-size: 16px;
  padding: 10px 0;
  margin-right: 20px;
  cursor: pointer;
}
.active {
  border-bottom: 3px solid #409eff;
  color: #409eff;
}
.nav {
  height: 36px;
  line-height: 36px;
  font-size: 16px;
}
.boxer {
  width: 100%;
  margin-left: 0 !important;
}
.content {
  height: calc(100vh - 100px - 100px);
}
/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: white !important;
}
.topBox {
  padding-left: 20px;
  display: flex;
}
.topList {
  display: flex;
}
/deep/ .el-tabs--top {
  width: 100% !important;
}
/deep/ .el-tabs__header {
  margin-bottom: 0 !important;
}
</style>